@extends('layouts.admin')
@push('morecss')
    <link href="{{ mix('css/admin/material_news.css') }}" rel="stylesheet">
    <link href="//cdn.tudouyu.cn/AdminInspinia/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
          rel="stylesheet">
    <!--webuploader上传组件CSS-->
    <link rel="stylesheet" type="text/css" href="/vendor/webuploader/webuploader.css">
@endpush

@push('morescript')
    <!--百度编辑器-->
    <script src="/vendor/ueditor/ueditor.config.js"></script>
    <script src="/vendor/ueditor/ueditor.all.js"></script>
    <!--webuploader上传组件JS-->
    <script type="text/javascript" src="/vendor/webuploader/webuploader.js"></script>

    <script type="application/javascript">
        let page_params = {
            @can('admin.wxmaterialnews.create')
            url_add: '{{ route('admin.wxmaterialnews.create') }}',
            @endcan
            @can('admin.wxmaterialnews.update')
            url_edit: '{{ route('admin.wxmaterialnews.update') }}',
            @endcan
            url_ueditorUpload:'{{ route('admin.sysfile.ueditorupload') }}',
            url_webupload:'{{ route('admin.sysfile.webupload') }}',
            data_material: {},//素材主键ID
            data_new_list:[],//图文列表
        }
    </script>
    <!-- require page js -->
    <script src="{{ mix('js/admin/wxmaterialnews_form.js') }}"></script>
@endpush
@section('content')
    <div class="wrapper wrapper-content">
        <div class="ibox">
            <div class="ibox-content" id="material">
                <div class="row">
                    <div class="material">
                        <div class="material-left">
                            <div v-for="(item, index) in display_new_list" v-bind:class="[news_index == index ? 'current' : '', index == 0 ? 'material-border-title' : 'material-body']" v-on:mouseenter="showActions(index)" v-on:mouseleave="hideActions(index)">
                                <div v-if="index==0" style="position: relative;text-align:center;">
                                    <img class="type3-img-0" v-show="item.thumb_view_url" :src="item.thumb_view_url" style="max-width:275px;max-height:150px;">
                                    <span class="img-text" v-show="!item.thumb_view_url">封面图片</span>
                                    <h5 class="type3-title-0">@{{ item.title ? item.title : '标题' }}</h5>
                                </div>

                                <p v-if="index!=0" class="type3-title-1">@{{ item.title ? item.title : '标题' }}</p>
                                <div v-if="index!=0" class="material-body-div">
                                    <img class="type3-img-1" v-show="item.thumb_view_url" :src="item.thumb_view_url" style="width: 100%;max-height:62px;">
                                    <span class="img-text" v-show="!item.thumb_view_url">缩略图</span>
                                </div>
                                <div class="actions" v-bind:class="[news_actions_index == index ? 'show' : 'hidden']">
                                    <div class="mask">
                                    <a href="javascript:;" class="align-bottom"  v-if="index!=0" v-on:click="newsMonveUp(index)"><i class="fa fa-long-arrow-up"></i>上移</a>
                                    <a href="javascript:;" class="align-bottom"  v-if="index < news_count-1" v-on:click="newsMoveDown(index)"><i class="fa fa-long-arrow-down"></i>下移</a>
                                    <a href="javascript:;" class="align-bottom" v-on:click="newsEdit(index)"><i class="fa fa-edit"></i>编辑</a>
                                    <a href="javascript:;" class="align-bottom" v-if="index!=0" v-on:click="newsTrash(index)"><i class="fa fa-trash"></i>删除</a>
                                    </div>
                                </div>
                            </div>
                            <div class="material-body">
                                <span class="material-plus">
                                    <a href="javascript:;" v-on:click="newsAdd"><i class="fa fa-plus"></i></a>
                                </span>
                            </div>
                        </div>
                        <div class="material-right" id="dir" dir="0" style="">
                            <form class="m-t" method="post" action="">
                                <div class="form-group">
                                    <label>标题</label>
                                    <input id="title" name="title" type="text" v-model="news_cur_data.title" class="form-control required">
                                </div>
                                <div class="form-group">
                                    <label>作者</label>
                                    <input id="author" name="author" type="text" v-model="news_cur_data.author" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>封面</label>
                                    <input id="author" name="author" type="hidden" v-model="news_cur_data.thumb_view_url" class="form-control">
                                    <div class="class-logo" style="background: #f8f8f8;">
                                        <p style="width: 270px; height: 150px;">
                                            <img id="thumb_view_url" v-show="news_cur_data.thumb_view_url" :src="news_cur_data.thumb_view_url" style="max-width:270px;max-height:150px;">
                                        </p>
                                    </div>
                                    <div id="btn-upload-thumb-view-url">选择封面</div>
                                    <p class="help-block">建议上传小于1M的图片.</p>
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" id="show_cover_pic" name="show_cover_pic" value="1" v-model="news_cur_data.show_cover_pic">
                                    <label for="show_cover_pic">
                                        封面图片显示在正文中
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label for="digest">摘要</label>
                                    <textarea id="digest" name="digest" v-model="news_cur_data.digest" class="form-control"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="content">正文</label>
                                    {{--<textarea id="content" name="content" v-model="news_cur_data.content" class="form-control"></textarea>--}}
                                        <script id="content" name="content" type="text/plain"></script>
                                </div>
                                <div class="form-group">
                                    <label for="content_source_url">阅读原文链接（群发图文消息）</label>
                                    <input id="content_source_url" name="content_source_url" v-model="news_cur_data.content_source_url" type="text"
                                           class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="news_click_url">图文跳转地址(被动回复图文消息)</label>
                                    <input id="news_click_url" name="news_click_url" v-model="news_cur_data.news_click_url" type="text" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>是否打开评论(群发消息)</label>
                                    <div class="input-group">
                                        <div class="radio radio-primary radio-inline">
                                            <input type="radio" id="need_open_comment_2" value="1" name="need_open_comment" v-model="news_cur_data.need_open_comment">
                                            <label for="need_open_comment_2">打开 </label>
                                        </div>
                                        <div class="radio radio-primary radio-inline">
                                            <input type="radio" id="need_open_comment_1" value="0" name="need_open_comment" v-model="news_cur_data.need_open_comment">
                                            <label for="need_open_comment_1"> 不打开 </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="news_click_url">是否粉丝才可评论(群发消息)</label>
                                    <div class="input-group">
                                        <div class="radio radio-primary radio-inline">
                                            <input type="radio" id="only_fans_can_comment_1" value="1" name="only_fans_can_comment" v-model="news_cur_data.only_fans_can_comment">
                                            <label for="only_fans_can_comment_1">打开 </label>
                                        </div>
                                        <div class="radio radio-primary radio-inline">
                                            <input type="radio" id="only_fans_can_comment_2" value="0" name="only_fans_can_comment" v-model="news_cur_data.only_fans_can_comment">
                                            <label for="only_fans_can_comment_2">
                                                不打开 </label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="hr-line-dashed"></div>
                        <div class="col-sm-8 col-sm-offset-2">
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="cat_id">素材分类</label>
                                <div class="input-group col-sm-5">
                                    <select id="cat_id" name="cat_id" v-model="display_material_data.cat_id" class="form-control">
                                        <option value="0">请选择</option>
                                        <option value="1">分类一</option>
                                        <option value="2">分类二</option>
                                    </select>
                                    <span class="help-block m-b-none">选择该图文素材所属分类</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="is_forever">素材类型：</label>
                                <div class="input-group">
                                    <div class="radio radio-primary radio-inline">
                                        <input type="radio" id="is_forever_1" value="1" name="is_forever" checked v-model="display_material_data.is_forever">
                                        <label for="is_forever_1"> 永久素材 </label>
                                    </div>
                                    <div class="radio radio-primary radio-inline">
                                        <input type="radio" id="is_forever_2" value="0" name="is_forever" v-model="display_material_data.is_forever">
                                        <label for="is_forever_2">
                                            临时素材 </label>
                                    </div>
                                    <span class="help-block m-b-none">用于群发的图文其素材类型必须是永久素材</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-2">
                                    <a href="{{ route('admin.wxmaterialnews.index') }}" class="btn btn-default" type="button"><i class="fa fa-arrow-left"></i> 返回</a>
                                </div>
                                <div class="col-sm-4">
                                    <button class="btn btn-primary btn-sub" v-on:click="materialSave" type="button">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection